<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>Opacity</title>
        <script type="text/javascript">
            //copy from http://gmaps-samples.googlecode.com/svn/trunk/versionchecker.html?v=2.86
            function getURLParam(name) {
              var regexS = "[\\?&]" + name + "=([^&#]*)";
              var regex = new RegExp(regexS);
              var results = regex.exec(window.location.href);
              return (results === null ? "" : decodeURIComponent(results[1]));
            }
            var gmaps_v = getURLParam('v');
            if (gmaps_v) gmaps_v = '&v='+gmaps_v;
            var script = '<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false' + gmaps_v + '"></' + 'script>';
            document.write(script);
        </script>
         <script type="text/javascript" src="../src/arcgislink.js">
        </script>
        
        <script type="text/javascript" src='http://google-maps-utility-library-v3.googlecode.com/svn/tags/extdraggableobject/1.0/src/ExtDraggableObject.js'>
        </script>
        <style>
        .btn {
            border-style: outset;
            background-color: white;
            width: 20px;
            font-weight: bold;
            text-align: center;
        }
          
        </style>
        <script type="text/javascript">
          function showOp(op){
            document.getElementById('opv').innerHTML = parseInt(op * 100);
          }
        function init() {
          var myOptions = {
            zoom: 17,
            center: new google.maps.LatLng(45.5, -122.7),
            mapTypeId: google.maps.MapTypeId.HYBRID,
            streetViewControl: true //my favorite feature in V3!
          }
          var opacity = 0.5;
          var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
          var url = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer';
          var agsType = new gmaps.ags.MapType(url, {
            name: 'ArcGIS',
            opacity: opacity
          });
          map.overlayMapTypes.insertAt(0, agsType);
          
          var bar = document.getElementById("op");
          var container = document.getElementById("opSlider");
          var range = (parseInt(container.style.width)-parseInt(bar.style.width));
          map.controls[google.maps.ControlPosition.TOP].push(document.getElementById('opContainer'));
          var opSlider = new ExtDraggableObject(bar, {
            restrictY:true, 
            container:container});
          opSlider.setValueX(range * opacity);
          showOp(opacity);
          
          google.maps.event.addListener(opSlider, 'drag', function(evt){
             var op = opSlider.left()/range;
             agsType.setOpacity(op);
             showOp(op);
          });
         
          google.maps.event.addDomListener(document.getElementById('less'), 'click', function(){
             var op = Math.max(agsType.getOpacity()-0.1, 0);
             agsType.setOpacity(op);
             opSlider.setValueX(range * op);
             showOp(op);
             agsType.hide();
          });
           google.maps.event.addDomListener(document.getElementById('more'), 'click', function(){
             var op = Math.min(agsType.getOpacity()+0.1, 1);
             agsType.setOpacity(op);
             opSlider.setValueX(range * op);
             showOp(op);
             agsType.show();
          });
        }
        </script>
    </head>
   <body style="margin:0px; padding:0px;" onload="init()">
        <div id="map_canvas" style="width:100%; height:100%">
        </div>
        <div id="opContainer" style="position:absolute; margin-top:30px; margin-left:-200px">
            <div id="less" title="Less" style="padding:0px; margin:0px;position:absolute;top:0px;left:0px;width:20px;height:20px;background-color: white;cursor:pointer;text-align:center;">
                &nbsp;-&nbsp;
            </div>
            <div id="opSlider" style="padding: 0px; margin:0px;position:absolute;top:0px;left:22px;overflow:hidden;background-color:yellow;width:160px;height:20px;color:#AAAAAA;font-size:0.9em">
                &nbsp;Drag to Change (<span id='opv'></span>)%
                <div id="op" title="Drag me!" style="padding: 0px; margin:0px;position:absolute;top:0px;left:0px;overflow:hidden;background-color:red;width:12px;height:20px;cursor:pointer;">
                    &nbsp;
                </div>
            </div>
            <div id="more" title="More" style="padding: 0px; margin:0px;position:absolute;top:0px;left:184px;overflow:hidden;background-color:white;width:20px;height:20px;cursor:pointer;text-align:center;">
                &nbsp;+&nbsp;
            </div>
            
                
        </div>

    </body>
</html>
